<template>
  <div>
    <PayBookTitle :queryGoods="queryGoods" :showTip="false" @childByValue="childByValue"/>
    <OnlineComponent :fileList="bookList"/>
    <el-pagination
        @current-change="handleCurrentChange"
        @next-click="getNextPage"
        @prev-click="getPrevPage"
        :current-page.sync="queryGoods.pageNum"
        :page-size="parseInt(queryGoods.pageSize)"
        layout="prev, pager, next, jumper"
        :total="total" style="overflow: hidden;float: right;">
    </el-pagination>
  </div>
</template>

<script>
import PayBookTitle from "@/components/PayBookTitle";
import OnlineComponent from "@/router/pages/OnlineAudio/OnlineComponent";

export default {
  name: "OnlineAudio",
  components: {PayBookTitle, OnlineComponent},
  data() {
    return {
      bookList: [],
      // currentPage: null,
      total: 0,
      queryGoods: {
        keyword: null,
        cateId: null,
        subId: null,
        pageNum: 1,
        pageSize: 10,
      }
    }
  },
  filters: {

  },
  methods: {
    childByValue(newQuery) {
      this.queryGoods = {...this.queryGoods, ...newQuery}
      this.$router.push({path: '/onlineAudio', query: this.queryGoods})
    },
    getPrevPage() {
      this.queryGoods.pageNum--
      this.$router.push({path: '/onlineAudio', query: this.queryGoods})
    },
    getNextPage() {
      this.queryGoods.pageNum++ // = this.currentPage
      this.$router.push({path: '/onlineAudio', query: this.queryGoods})
    },
    handleCurrentChange(val) {
      this.queryGoods.pageNum = val * 1
      this.$router.push({path: '/onlineAudio', query: this.queryGoods})
    },
    getList() {
      this.getRequest('/p/pms/book/audioBookList', this.queryGoods).then((resp) => {
        this.bookList = resp.data.list
        this.total = parseInt(resp.data.total)
        this.queryGoods.pageSize = parseInt(resp.data.pageSize)
        this.queryGoods.pageNum = parseInt(resp.data.pageNum)
      })
    },
  },
  watch: {
    '$route'() {
      this.getList()
    }
  },
  created() {
    this.queryGoods = {...this.queryGoods, ...this.$route.query}
    // this.childByValue()
    this.getList();
  }


}
</script>

<style scoped>

</style>